<!DOCTYPE HTML>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>登录</title>
    <link rel="stylesheet" href="../../css/aui.css">
    <link rel="stylesheet" href="../../css/common.css">
    <script type="text/javascript" src="../../script/api.js"></script>
    <script language="JavaScript" src="../../script/vue.js"></script>
    <script language="JavaScript" src="../../script/common.js"></script>
    <style>
        .waite-sendcls {
            background-color: #fff;
            color: #d9d9d9;
        }

        .can-sendcls {
            background-color: #fff;
            color: #e02e24;
        }
    </style>
</head>

<body>
    <div id="loginbox">
      <header class="aui-bar aui-bar-nav" id="header">
          <a class="aui-pull-left aui-btn" onclick="closewin();">
              <span class="aui-iconfont aui-icon-left"></span>
          </a>
          <div class="aui-title">登录</div>
      </header>
        <div style="margin-top: 40%" v-if="logintype=='weixin'">
            <div class="aui-content-padded" style="text-align: center">
                选择登录方式（演示版请用手机号登录）
            </div>
            <div class="aui-content-padded ">
                <div class="aui-btn aui-btn-block  aui-btn-sm" style="background-color: #1DC116;width: 10rem;margin: 0 auto;" @click="weixinlogin">
                    <i class="aui-iconfont aui-icon-wechat" style="font-size: 1.5rem;color:#fff;vertical-align: middle;margin-right:0"></i>
                    <span style="display: inline-block;color:#fff;">微信登录</span>
                </div>
            </div>
            <div class=" aui-content-padded " style="text-align: center;font-size: 0.6rem;color:#00a0e9" @click="changelogin('mobile')">
                手机号登录（验证码随便输）
            </div>
        </div>


        <div class="aui-content aui-margin-t-15" style="margin-top: 40%" v-if="logintype=='mobile'">
            <ul class="aui-list aui-form-list">
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-label aui-border-r color-orange">
                            手机号 <small class="aui-margin-l-5 aui-text-warning">+86</small>
                        </div>
                        <div class="aui-list-item-input aui-padded-l-10">
                            <input type="number" pattern="[0-9]*" v-model="mobile" placeholder="输入手机号" id="mobile"><i v-if="mobile != ''" @click="mobile = ''" class="aui-iconfont iconfont icon-cuohao"></i>
                        </div>
                    </div>
                </li>
                <li class="aui-list-item">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input" style="width: auto;">
                            <input type="number" pattern="^1[345678][0-9]{9}$" v-model="safecode" placeholder="输入短信验证码" id="code">
                        </div>
                        <div class="aui-list-item-label aui-margin-r-15" style="width: 6rem;">
                            <span v-if="sended" class="aui-btn" v-bind:class="codetextcls" style="width: 6rem;background-color:#bdbdbd;color:#fff">{{time}}秒后重试</span>
                            <span v-if="!sended" @click="getcode()" v-bind:class="codetextcls" class="aui-btn" style="width: 6rem;">{{codetext}}</span>


                        </div>
                    </div>
                </li>
            </ul>
            <div class="aui-content-padded">
                <div class="aui-btn aui-btn-block aui-btn-sm"  @click=" mobilelogin() "  style="background-color: #e02e24;color:#fff">登录</div>
            </div>

            <div class=" aui-content-padded " style="text-align: center;font-size: 0.6rem;color:#00a0e9" @click="changelogin('weixin')">
                微信登录
            </div>
        </div>

    </div>

</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#loginbox',
        data: {
            mobile: '',
            safecode: '',
            logintype: 'weixin',
            codetext: '获取验证码',
            sended: false,
            time: 59,
            token: ''
        },
        computed: {
            codetextcls: function() {
                var cls = '';
                if (this.mobile.length == 11 && !this.sended) {
                    cls = 'can-sendcls';
                } else {
                    cls = 'waite-sendcls';
                }
                return cls;
            }
        },
        methods: {
            changelogin: function(logintype) {
                this.logintype = logintype;
            },
            getcode: function() {
                if (this.mobile.length != 11) {
                    $page.toast('请填写手机号!');
                    return false;
                }
                $page.get_data('/api/member/sendCode', 'post', {
                    mobile: vm.mobile
                }, function(ret) {
                    console.log(JSON.stringify(ret));
                    if (ret.errno === 1000) {
                        vm.sended = true;
                        vm.codetext = '重新获取验证码';
                        //倒计时
                        var t = setInterval(function() {
                            vm.time -= 1;
                            if (vm.time < 0) {
                                vm.sended = false;
                                clearInterval(t);
                            }
                        }, 1000);
                        vm.time = 59;
                    }else{
                      $page.toast(ret.errmsg);
                    }
                })
            },
            weixinlogin: function() {
                  $page.toast("演示版请用手机号登录");
                  return false;
                var wx = api.require('wx');
                wx.auth({}, function(ret, err) {
                    if (ret.status) {
                        //换token
                        $page.get_data('/api/member/wexinlogin', 'post', ret, function(result) {
                            if (result.errno == 1000) {
                                vm.token = result.data.token;
                                vm.setlogined();

                            } else {
                                $page.toast("授权失败:" + result.errmsg);
                            }
                        });

                    } else {
                        $page.toast("授权失败:code:" + err.code);
                    }
                });
            },
            mobilelogin: function() {
                $page.get_data('/api/member/mobilelogin', 'post', {
                    mobile: this.mobile,
                    safecode: this.safecode
                }, function(ret) {
                    if (ret.errno === 1000) {
                        vm.token = ret.data.token;
                        vm.setlogined();

                    } else {
                        $page.toast(ret.errmsg);
                    }
                });
            },
            setlogined: function() {
                console.log("token..."+vm.token);
                if (vm.token) {
                    $api.setStorage('token', this.token);
                    api.sendEvent({
                        name: 'logined'
                    });

                          closewin();
                }

            }
        }
    });
    apiready = function() {

    };
</script>

</html>
